<template>
  <div class="city">
    <city-header></city-header>
    <search
      :cities="cities"></search>
    <city-list
      :info="info"
      :letter="letter"></city-list>
    <alphabet
      :letters="letters"
      @change="change"></alphabet>
  </div>
</template>
<script>
import alphabet from './alphabet'
import cityList from './city-list'
import cityHeader from './header'
import search from './search'
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'city',
  components: {
    alphabet,
    cityList,
    cityHeader,
    search
  },
  data () {
    return {
      info: {},
      letters: [],
      letter: '',
      cities: {}
    }
  },
  computed: {
    ...mapState({ city: 'city' })
  },
  created () {
    this.getInfo(`api/static/mock/city.json`)
  },
  methods: {
    getInfo (url) {
      return axios.get(url, { timeout: 10000 }).then(
        res => {
          let data = res.data.data
          if (data) {
            this.cities = data.cities
            this.info = data
            this.letters = Object.keys(data.cities)
          }
        }
      )
    },
    change (letter) {
      this.letter = letter
    }
  }
}
</script>
<style lang="stylus" scoped>
</style>
